<template>
    <view class="main">
        <view class="top">
            <NavBar title="选择感兴趣的行业" :fixed="true" right-text="下一步" @onClickRight="onClickRight" />
            <!-- <view class="select ">
                <view class="dispaly-just-between">
                    <view class="select-left dispaly-center">
                        <view class="select-txt">已选行业</view>
                        <view class="select-txt">
                            <view>（<text style="color: #0753fd;">{{ selectTagList.length }}</text>/<text>1</text>）
                            </view>
                        </view>
                    </view>
                    <view class="select-right dispaly-center">
                        <view class="select-right-text">行业圈子推荐</view>
                        <view>
                            <van-switch active-color="#0753fd" inactive-color="#eeeeee" v-model="checked" />
                        </view>
                    </view>
                </view>
                <view class="select-tag dispaly-center">
                    <view class="tag dispaly-just-between" v-for="(item, index) in selectTagList" :key="index">
                        <view class="tag-txt">{{ item.name }}</view>
                        <view class="tag-icon" @click="deleteTag(item, index)">
                            <van-icon name="cross" color="#0753fd" />
                        </view>
                    </view>
                </view>
            </view> -->
        </view>
        <view class="select-list dispaly-just-between">
            <scroll-view class="scroll-view-l" scroll-y="true" :style="{ 'height': selectHeight + 'px' }">
                <view id="demo1" class="l-item" v-for="(item, index) in dataList" :key="index"
                    @click="clickOneCate(item, index)" :class="{ 'active': current == index }">{{
                        item.name }}</view>
            </scroll-view>
            <scroll-view class="scroll-view-r" scroll-y="true" :style="{ 'height': selectHeight + 'px' }">
                <view id="demo1" class="r-item dispaly-just-between" v-for="(item, index) in twoDataList" :key="index"
                    @click="handleSelection(item, index)">
                    <view :class="{ 'active': currentTwo == index }">{{ item.name }}</view>
                    <view class="sel-icon dispaly-align-center" v-if="currentTwo == index">
                        <van-icon name="success" color="#fff" />
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getScreenSHeight, getElementHeight } from '@/utils/util'
import { onLoad } from '@dcloudio/uni-app'
import { getIndustryList, updateUserInfo, getUserInfo } from '@/api/apiList'


const getListData = async () => {
    const res = await getIndustryList()
    if (res.code == 200) {
        dataList.value = res.data
        console.log(res, 'res')
    }
}

const checked = ref(false);
const onClickRight = async () => {
    if (selectItem.value) {
        uni.navigateBack({
            delta: 1,
            success: () => {
                uni.$emit('getType', {
                    data: selectItem.value,
                    data: selectItem.value,
                })
            }
        })
    } else {
        uni.showToast({
            title: '请选择行业',
            icon: 'none'
        })
    }

}

const getUserInfoData = async () => {
    const res = await getUserInfo()
    if (res.code == 200) {
        uni.setStorageSync('userInfo', res.data)
    }
}

// 选中的分类
const selectTagList = ref([])

// 分类数据
const dataList = ref([])

// 点击一级分类
const current = ref(0)
const clickOneCate = (item, index) => {
    current.value = index
    if (item.children.length) {
        twoDataList.value = item.children
    }
}

// 点击二级分类
const twoDataList = ref([]) // 二级分类列表
const currentTwo = ref(null)
const selectItem = ref(null)
const handleSelection = (item, index) => {
    currentTwo.value = index
    selectItem.value = item
}

// 整合所有chilren
let childList = ref([])
const concatChild = () => {
    dataList.value.forEach(item => {
        if (item.children.length) {
            item.children.forEach(child => {
                childList.value.push(child)
            })
        }
    })
}

// 过滤出isSelect为true
const filterIsSelectTrue = () => childList.value.filter(item => item.isSelect)

// 删除选择的标签
const deleteTag = (item, index) => {
    let tagIndex = selectTagList.value.findIndex(data => data.id == item.id)
    selectTagList.value.splice(tagIndex, 1)
    childList.value.forEach(data => {
        if (data.id == item.id) {
            data.isSelect = false
        }
    })
}


onLoad(async () => {
    await getListData()
    twoDataList.value = dataList.value[0].children
    concatChild()
})

const selectHeight = ref(0)
onMounted(async () => {
    const topHeight = await getElementHeight('.top')
    selectHeight.value = await getScreenSHeight(Number(topHeight))
})

</script>

<style lang="scss" scoped>
.active {
    color: #0753FD !important;
}

.main {

    .select {
        background-color: #fff;
        padding: 40rpx 30rpx;

        .select-left {
            .select-txt {
                font-family: PingFang SC Regular;
                font-weight: 400;
                font-size: 26rpx;
                color: #111111
            }
        }

        .select-right {
            .select-right-text {
                font-family: PingFang SC Regular;
                font-size: 26rpx;
                font-weight: normal;
                color: #111111;
                margin-right: 16rpx;
            }
        }

        .select-tag {
            margin-top: 30rpx;

            .tag:first-child {
                margin-right: 20rpx;
            }

            .tag {
                border-radius: 8rpx;
                background: #FFFFFF;
                box-sizing: border-box;
                border: 1px solid #0753FD;
                padding: 16rpx 20rpx;

                .tag-txt {
                    font-family: PingFang SC Regular;
                    font-size: 24rpx;
                    font-weight: normal;
                    color: #0753FD;
                    margin-right: 20rpx;
                }
            }
        }
    }

    .select-list {
        .scroll-view-l {
            background-color: #fff;

            .l-item {
                font-family: PingFang SC Bold;
                font-size: 28rpx;
                font-weight: normal;
                color: #111111;
                padding: 50rpx 0 50rpx 32rpx;
            }
        }

        .scroll-view-r {
            .r-item {
                font-family: PingFang SC Bold;
                font-size: 28rpx;
                font-weight: normal;
                color: #111111;
                padding: 50rpx 32rpx 50rpx 32rpx;
                box-sizing: border-box;

                .sel-icon {
                    width: 32rpx;
                    height: 32rpx;
                    background-color: #0753FD;
                    border-radius: 50%;
                }
            }
        }
    }
}
</style>